{include file="common/header-top" /}

<link rel="stylesheet" href="/__FRONT__/css/job-index.css?_2019">

<div id='app' v-cloak>


    <!-- 搜索栏 start -->
    <van-row>
        <van-col span="24">
            <van-search
                    v-model="searchValue"
                    placeholder="请输入需要查找的兼职"
                    show-action
                    shape="round"
                    @search="clickSearch"
            >
                <van-button round slot="action" type="primary" size="small" @click="clickSearch">搜索</van-button>
            </van-search>
        </van-col>
    </van-row>
    <!-- 搜索栏 end -->


    <!--轮播-->
    <van-swipe :autoplay="1500" indicator-color="white" :height="180">
        <van-swipe-item v-for="(item, index) in topBanner" :key="index" @click="swipeClick(item)">
            <van-image :src="item.logo" v-lazy="item.logo" :lazy-load="false"/>
        </van-swipe-item>
    </van-swipe>
    <!--轮播-->





    <!--兼职列表 start -->

    <van-notice-bar
            :scrollable="false"
            background="#ebf9ff"
            color="#000000"
            left-icon="arrow-down"
    >
        <span>搜索内容：{{searchValue}}</span>
    </van-notice-bar>

    <div style="padding-bottom: 55px;">
        <van-row v-for="item in jobList" class="job-item" >
            <a :href="'/index/Jobs/jobDetail?id=' + item.id" class="job-item-a">
                <van-col span="5">
                    <van-icon :name="item.jobTypeImg" class="job-item-img-icon" size="45px"></van-icon>
                </van-col>

                <van-col span="11">
                    <h4 class="job-item-title">
                        <div class="van-ellipsis">{{item.title}}</div>
                    </h4>
                    <van-cell
                            icon="/__FRONT__/images/icon/publish-job-address.png"
                            :title="item.address"
                    >
                    </van-cell>
                    <van-cell
                            icon="/__FRONT__/images/icon/publish-job-time.png"
                            :title="item.work_timeCh"
                    ></van-cell>
                    <van-cell
                            icon="/__FRONT__/images/icon/publish-job-money.png"
                    >
                                <span class="job-item-span" slot="title">
                                    <span class="money-font">{{item.settlement_typeCh}}</span>
                                </span>
                    </van-cell>

                </van-col>

                <van-col span="8">
                    <van-tag round type="warning" style="float:right;margin-top: 5px;" v-if="item.is_top">置顶</van-tag>
                    <div class="van-ellipsis job-item-money-div">
                        <span class="money-font job-item-money-font">{{item.salary}}</span>
                        <span class="job-item-span-unit">{{item.salary_unitCh}}</span>
                    </div>
                </van-col>
            </a>
        </van-row>

        <!--兼职列表 end -->
    </div>








    {include file="common/foot-bar" /}

</div>

<script>

    Vue.use(vant.Lazyload);
    var vm = new Vue({
        //挂载点
        el: '#app',
        //数据集合
        data() {
            return {
                value: 3,
                active:0,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                //顶部banner
                topBanner: [],

                searchValue: '{$searchValue}',
                city: '{$city}',
                cityId: '{$cityId}',

                //兼职列表集
                jobList: [],
            }
        },

        //创建时执行 操作
        created : function (){

            //广告banner接口数据
            axiosRequest.get('/api/common/bannerItems', {params:{locationId:3}}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.topBanner = response.data;
                } else {
                    vant.Notify({ type: 'danger', message: response.msg });
                }
            });

            this.clickSearch();
        },

        //方法集合 在 `methods` 对象中定义方法
        methods: {

            //轮播点击
            swipeClick(item){
                if (item.linkurl) {
                    window.location.href = item.linkurl;
                }
            },




            clickSearch() {
                if (this.searchValue) {
                    var postData = {
                        cityId: this.cityId,
                        city: this.city,
                        searchValue: this.searchValue,
                        page: 1,
                        pageSize: 15
                    };
                    axiosRequest.post('/api/common/searchJob', postData).then(function (response) {
                        if (response.code == 200) {
                            vm.$data.jobList = response.data;
                        } else {
                            vant.Toast({
                                message: response.msg
                            });
                        }
                    });
                } else {
                    vant.Toast.fail('请输入要搜索的内容');
                }
            },


        }
    });
</script>


{include file="common/foot-bottom" /}
